<template>
	<view>

		<view class="swiper-container scroll-view" :class="swiper_animation<2?'hauto':'h75'" @touchstart ="diandian()" v-if="is_close_show||is_yichang_show||is_stop_show||is_aftersale_show">
		    <view class="swiper " :class="swiper_animation<2?'scroll-text1':'scroll-text'" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		      
			  <view class="swiper-item " v-if="is_close_show==true">
					<view class="cardBox"  v-show="is_close_show==true">
						<view class="flex" @click="close_order_action()" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle" style="width: 79%;">{{text.xieyi}} </text> 
							</view>
							<view class="jiantou" style="height: auto;line-height: unset; font-weight: 500;">
								>
							</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderInfo.close_status!=3">
							<view class="after_sale_text">
								<text class="red_dian" v-if="order.orderInfo.close_status==0">·</text>
								<text class="text_huanhang" v-if="order.orderInfo.close_user_id!=order.user_id">{{close_order.name}}</text>
								<text class="text_huanhang" v-if="order.orderInfo.close_user_id==order.user_id">{{close_order.name2}}</text>
							</view>
							<view class="after_sale_time">{{close_order.create_at}}</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderInfo.close_status!=0&&order.orderInfo.close_reason_time">
							<view class="after_sale_text">
								<text  class="red_dian" v-if="order.orderInfo.close_status!=3">·</text>
								<block v-if="order.orderInfo.close_user_id==order.user_id">
									<text class="text_huanhang">
										<text  v-if="order.orderInfo.close_status==1">{{$t('对方同意关闭订单，订单已关闭')}}</text>
										<text  v-if="order.orderInfo.close_status!=1">{{$t('对方拒绝关闭订单申请，请及时处理')}}</text>
									</text>
								</block>
								<block v-else>
									<text  class="text_huanhang">
										<text v-if="order.orderInfo.close_status==1">{{$t('你已同意关闭订单，订单已关闭')}}</text>
										<text v-if="order.orderInfo.close_status!=1">{{$t('你已拒绝关闭订单申请，等待对方处理')}}</text>
									</text>
								</block>
							</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderInfo.close_status==3">
							<view class="after_sale_text">
								<text  class="red_dian">·</text>
								<block v-if="order.orderInfo.close_user_id!=order.user_id">
									<text  class="text_huanhang">
										<text >{{$t('对方选择继续交易，订单将正常进行')}}</text>
									</text>
								</block>
								<block v-else>
									<text  class="text_huanhang">
										<text >{{$t('你已选择继续交易，订单将正常进行')}}</text>
									</text>
								</block>
							</view>
						</view>


						<view style="height: 10rpx;width: 100%;"></view>
					</view>
				</view>	
				
				<view class="swiper-item" v-if="is_yichang_show==true" v-for="(it,ind) in order.orderSituation" :key="ind">
					<view class="cardBox" v-show="is_yichang_show==true">
						<view class="flex" @click="yichang_action(it.id)"  style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle" style="width: 79%;">{{text.yichang}} </text> 
							</view>
							<view class="jiantou" style="height: auto;line-height: unset; font-weight: 500;">
								>
							</view>
						</view>
						<view class="flex" style="margin-top: 10rpx;" >
							<view class="after_sale_text">
								<text  class="red_dian" v-if="it.is_situation==0">·</text>
								<text  class="text_huanhang">{{yichang_order.name}} ({{$t(it.abnormal_issues)}} {{$t(it.abnormal_cause)}})</text>
							</view>
							<view class="after_sale_time">{{yichang_order.create_at}}</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="it.is_situation!=0">
							<view class="after_sale_text">
								<text  class="red_dian">· </text>
								<block v-if="it.user_id==order.user_id">
									<text class="text_huanhang">
										<text  v-if="it.is_situation==1">{{$t('对方选择继续交易，订单将正常进行')}}</text>
										<text  v-if="it.is_situation!=1">{{$t('对方选择申请终止交易')}}</text>
									</text>
								</block>
								<block v-else>
									<text  class="text_huanhang">
										<text v-if="it.is_situation==1">{{$t('你已选择继续交易，订单将正常进行')}}</text>
										<text v-if="it.is_situation!=1">{{$t('你已选择申请终止交易')}}</text>
									</text>
								</block>
							</view>
						</view>
						
						<view style="height: 10rpx;width: 100%;"></view>
					</view>
				</view>		
					
				<!-- <swiper-item class="swiper-item" v-if="is_stop_show==true">	
					<view class="cardBox" v-show="is_stop_show==true"> -->
				<view class="swiper-item" v-if="is_stop_show==true">
					<view class="cardBox">
						<view class="flex" @click="stop_order_action()" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle" style="width: 79%;">{{text.stop}} </text> 
							</view>
							<view class="jiantou" style="height: auto;line-height: unset; font-weight: 500;">
								>
							</view>
						</view>
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderInfo.terminate_status!=3">
							<view class="after_sale_text">
								<text class="red_dian" v-if="order.orderInfo.terminate_status==0">·</text>
								<text class="text_huanhang" v-if="order.orderInfo.terminate_user_id!=order.user_id">{{stop_order.name}}</text>
								<text class="text_huanhang" v-if="order.orderInfo.terminate_user_id==order.user_id">{{stop_order.name2}}</text>
								
							</view>
							<view class="after_sale_time">{{stop_order.create_at}}</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderInfo.terminate_status!=0&&order.orderInfo.terminate_transaction_time">
							<view class="after_sale_text">
								<text  class="red_dian" v-if="order.orderInfo.terminate_status!=3">·</text>
								<block v-if="order.orderInfo.terminate_user_id==order.user_id">
									<text class="text_huanhang">
										<text  v-if="order.orderInfo.terminate_status==1">{{$t('对方同意终止交易，订单关闭')}}</text>
										<text  v-if="order.orderInfo.terminate_status!=1">{{$t('对方拒绝终止交易申请，请及时处理')}}</text>
									</text>
								</block>
								<block v-else>
									<text class="text_huanhang">
										<text v-if="order.orderInfo.terminate_status==1">{{$t('你已同意终止交易，订单关闭')}}</text>
										<text v-if="order.orderInfo.terminate_status!=1">{{$t('你已拒绝终止交易申请，等待对方处理')}}</text>
									</text>
								</block>
							</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderInfo.terminate_status==3">
							<view class="after_sale_text">
								<text  class="red_dian">·</text>
								<block v-if="order.orderInfo.terminate_user_id!=order.user_id">
									<text class="text_huanhang">
										<text >{{$t('对方选择继续交易，订单将正常进行')}}</text>
									</text>
								</block>
								<block v-else>
									<text class="text_huanhang">
										<text >{{$t('你已选择继续交易，订单将正常进行')}}</text>
									</text>
								</block>
							</view>
						</view>
						<view style="height: 10rpx;width: 100%;"></view>	
					</view>
				</view>
				
				<view class="swiper-item" v-if="is_aftersale_show==true">		
					<view @click="customer()" class="cardBox" v-if="loading==true" v-show="is_aftersale_show==true">
						<view class="flex" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle" style="width: 79%;">{{text.aftersale}} </text> 
							</view>
							<view class="jiantou" style="height: auto;line-height: unset; font-weight: 500;">
								>
							</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderAfterSale==null">
							<view class="after_sale_text">
								<text  class="red_dian"  v-if="!order.orderAfterSale">·</text>
								<text  class="text_huanhang">{{aftersale_order.name}}</text>
							</view>
							<view class="after_sale_time">{{aftersale_order.create_at}}</view>
						</view>
						
						<view class="flex" style="margin-top: 10rpx;" v-if="order.orderAfterSale">
							<view class="after_sale_text">
								
								
								<block v-if="order.orderAfterSale.user_id==order.user_id">
									
									<view  class="text_huanhang"  v-if="order.orderAfterSale.aftertsales_type==1&&order.orderAfterSale.release_status==1">
										<view>{{$t('对方提交了售后申请,请及时处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('您已同意本次售后申请')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==1">
										<view>{{$t('对方发起申诉，请及时处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('您已同意申诉，售后关闭')}}</view>
									</view>
									
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==2&&order.orderAfterSale.join_status==1">
										<view>{{$t('你拒绝了对方的申诉，等待对方处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方同意了你的售后申请')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==2&&order.orderAfterSale.join_status==0">
										<view>{{$t('对方发起申诉，请及时处理')}}	 </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('你拒绝了对方的申诉，等待对方处理')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==0&&order.orderAfterSale.join_status==0">
										<view v-if="order.orderAfterSale.sale&&order.orderAfterSale.sale.aftertsales_type==3">{{$t('你修改了售后申请，等待对方处理')}}</view>
										<view v-else>{{$t('你拒绝了对方的申诉，等待对方处理')}}</view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方发起申诉，请及时处理')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.join_status==1">
										<view>{{$t('你拒绝了对方的申诉，等待对方处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方同意了你的售后申请')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==3">
										<view>{{$t('对方发起申诉，请及时处理')}}	 </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('你修改了售后申请，等待对方处理')}}</view>
									</view>
								
								</block>
								
								<block v-if="order.orderAfterSale.user_id!=order.user_id">
									<view  class="text_huanhang"  v-if="order.orderAfterSale.aftertsales_type==1&&order.orderAfterSale.release_status==1">
										<view>{{$t('你发起了申诉，等待对方处理')}}   </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方同意你提交的申诉，售后关闭')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==1">
										<view>{{$t('你发起了申诉，等待对方处理')}}   </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方同意你提交的申诉，售后关闭')}}</view>
									</view>
									
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==2&&order.orderAfterSale.join_status==1">
										<view>{{$t("对方不同意你提交的申诉，请及时处理")}} </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('您已同意本次售后申请')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==2&&order.orderAfterSale.join_status==0">
										<view>{{$t('你发起了申诉，等待对方处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方不同意你提交的申诉，请及时处理')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.release_status==0&&order.orderAfterSale.join_status==0">
										<view v-if="order.orderAfterSale.sale&&order.orderAfterSale.sale.aftertsales_type==3">{{$t('对方修改了售后申请，请及时处理')}}</view>
										<view v-else>{{$t('对方不同意你提交的申诉，请及时处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('你发起了申诉，等待对方处理')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==2&&order.orderAfterSale.join_status==1">
										<view>{{$t('对方不同意你提交的申诉，请及时处理')}}   </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('您已同意本次售后申请')}}</view>
									</view>
									
									<view  class="text_huanhang"  v-else-if="order.orderAfterSale.aftertsales_type==3">
										<view>{{$t('你发起了申诉，等待对方处理')}}  </view>
										<view style="margin-top: 5px;"><text  class="red_dian2">·</text> {{$t('对方修改了售后申请，请及时处理')}}</view>
									</view>
								
								</block>
								
							</view>
						</view>
						<view class="flex"  v-else>
							<view class="after_sale_text" style="margin-top: 10rpx;" v-if="order.orderInfo.status==5">
								<text  class="red_dian">·</text>
								<block v-if="order.release_user.id==order.user_id">
									<text  class="text_huanhang" >{{$t('对方同意了你的售后申请')}}</text>
								</block>
								<block v-if="order.release_user.id!=order.user_id">
									<text  class="text_huanhang"  >{{$t('您已同意本次售后申请')}}</text>
								</block>
							</view>
						</view>

						<view style="height: 10rpx;width: 100%;"></view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
	
	
	
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	
	export default {
		components: {
			
		},
		props:{
			order:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				
				//文字
				text:{			
					xieyi:this.$t('交易关闭记录'),
					yichang:this.$t('异常反馈记录'),
					stop:this.$t('终止交易记录'),
					aftersale:this.$t('售后记录')
					
				},
					
				close_order:{
					name:this.$t('对方申请关闭订单,请及时处理'),
					name2:this.$t('您正在申请关闭订单,请及时处理'),
					create_at:''
				},
				yichang_order:{
					name:this.$t('您有一条异常反馈记录,请及时处理'),
					create_at:''
				},
				stop_order:{
					name:this.$t('对方申请终止交易,请及时处理'),
					name2:this.$t('你提交了终止交易申请，等待对方处理'),
					create_at:''
				},
				aftersale_order:{
					name:this.$t('你提交了售后申请，请等待对方处理'),
					create_at:''
				},
				
				
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				
				is_close_show:false,
				
				is_yichang_show:false,
				
				is_stop_show:false,
				is_aftersale_show:false,
				loading:false,
				
				swiper_animation:0
			}
		},
		mounted() {
			var that = this
			
			if((this.order)&&(this.order.orderInfo.close_reason_time)){
				this.is_close_show=true
				if((this.order.orderInfo.close_status==1)||(this.order.orderInfo.close_status==3)){
					//this.is_close_show=false
				}
			}
			if((this.order)&&(this.order.orderInfo.situation_id)){
				if(this.order.role==1){
					this.yichang_order.name = this.$t('异常反馈,请处理')
				}else{
					this.yichang_order.name = this.$t('您有异常反馈,请处理')
				}
				this.is_yichang_show=true
			}
			if((this.order)&&(this.order.orderInfo.terminate_transaction_time)){
				this.is_stop_show=true
				if((this.order.orderInfo.terminate_status==1)||(this.order.orderInfo.terminate_status==3)){
					//this.is_stop_show=false
				}
			}
			if((this.order)&&(this.order.orderInfo.aftersales_id)){
				that.is_aftersale_show=true
				this.$u.api.order.afterSalesRecord({
					aftersales_id: this.order.orderInfo.aftersales_id,
					lang:this.lang
				}).then(result => {
					that.aftersale_order.create_at = that.timestampToDate(result.createtime*1000)
					that.loading=true
					
					
					// if((result.release_status==1)||(result.join_status==1)){
					// 	that.is_aftersale_show = false
					// }
				})
			}
			// if(that.order.user_id !=this.order.release_user.id){
			if(that.order.role==2){
				that.aftersale_order.name = this.$t('对方提交了售后申请,请及时处理')
			}else{
				that.aftersale_order.name = this.$t('你提交了售后申请，请等待对方处理')
			}
		
			var swiper_animation = 0;
			if(that.is_close_show){ swiper_animation = Number(swiper_animation)+1 ; }
			if(that.is_stop_show){ swiper_animation = Number(swiper_animation)+1 ; }
			if(that.is_aftersale_show){ swiper_animation = Number(swiper_animation)+1 ; }
			if(that.order.orderSituation.length!=0){ swiper_animation = Number(swiper_animation)+Number(that.order.orderSituation.length) ; }
			that.swiper_animation = swiper_animation

			// if((that.order.orderInfo.status==3)||(that.order.orderInfo.status==4)||(that.order.orderInfo.status==5)){
			// 	that.swiper_animation = 0;
			// }



		},
		methods:{
			customer(){
				this.$emit('change','customer',this.order)
			},
			close_order_action(){
				this.$emit('change','close_order',this.order)
			},
			stop_order_action(){
				this.$emit('change','stop_order',this.order)
			},
			yichang_action(id){
				this.$emit('change','yichang1',id)
			},
			timestampToDate(timestamp) {
			  const date = new Date(timestamp); 
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			diandian(){
				this.swiper_animation=0
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/orderDetail.scss";
	
	.cardBox{ margin-top: 5rpx; margin-bottom: 20rpx;}
	
	.after_sale_text { width: 90%;}
	.swiper-container {
	  width: 100%;
	  position: relative;
	  overflow-y: scroll;
	}
	
	.h75{
		height: 75px !important; /* 设置swiper的高度 */
		overflow-y: scroll;
	}
	.hauto{
		height: auto;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
	}
	 
	// .swiper {
	//   width: 100%;
	//   height: 100%;
	// }
	 
	// .swiper-item {
	//   display: flex;
	//   justify-content: center;
	//   align-items: center;
	//   height: 100%;
	// }
	 
	// .slide-image {
	//   width: 100%;
	//   height: 100%;
	//   object-fit: cover; /* 保持图片的宽高比 */
	// }
	
	.after_sale_time{ display: none; }
	.scroll-view {
	   white-space: nowrap;
	 }
	 .scroll-text {
	   display: inline-block;
	   width: 100%;
	   animation: scroll-animation 10s linear infinite;
	 }
	 @keyframes scroll-animation {
	   0% {
	     transform: translateY(0);
	   }
	   100% {
	     transform: translateY(-100%);
	   }
	 }
	 .scroll-text1 {
	   display: inline-block;
	   width: 100%;
	 }
	 
	 .red_dian{
		 color: red;font-size: 40px;position: absolute;left: 0px;top: -15px; margin-right: 5px;
	 }
	 
	 .red_dian2{
	 		 color: red;font-size: 40px;margin-right: 5px;position: absolute;left: 0px;top: 14rpx; 
	 }
	 
	 .text_huanhang{
		 color: #000000;font-size: 12px;padding-left: 16px;white-space: normal;
	 }
</style>